<script setup lang="ts">
const mobileMenuOpen = ref(false)

function toggleMobileMenu() {
  mobileMenuOpen.value = !mobileMenuOpen.value
}
</script>

<template>
  <header class="bg-white/90 w-full shadow-sm transition-all duration-300 top-0 fixed z-50 backdrop-blur-md">
    <nav class="container-max py-4">
      <div class="flex items-center justify-between">
        <!-- Logo -->
        <div class="flex items-center space-x-3">
          <div class="bg-gradient-to-br rounded-lg flex h-10 w-10 items-center justify-center from-blue-600 to-purple-600">
            <span class="text-xl text-white font-bold">旭</span>
          </div>
          <span class="text-2xl title-gradient font-bold">旭兴智能科技</span>
        </div>

        <!-- Desktop Navigation -->
        <div class="hidden items-center space-x-8 md:flex">
          <NuxtLink to="/" class="nav-link">
            首页
          </NuxtLink>
          <div class="group relative">
            <span class="nav-link cursor-pointer">产品中心</span>
            <div class="mt-2 rounded-lg bg-white opacity-0 w-48 invisible shadow-lg transition-all duration-300 left-0 top-full absolute group-hover:opacity-100 group-hover:visible">
              <NuxtLink to="/products/photovoltaic" class="px-4 py-3 block hover:bg-gray-50">
                光伏产品
              </NuxtLink>
              <NuxtLink to="/products/equipment" class="px-4 py-3 block hover:bg-gray-50">
                整线设备
              </NuxtLink>
              <NuxtLink to="/products/research" class="px-4 py-3 block hover:bg-gray-50">
                研发产品
              </NuxtLink>
            </div>
          </div>
          <NuxtLink to="/about" class="nav-link">
            关于我们
          </NuxtLink>
          <NuxtLink to="/news" class="nav-link">
            新闻资讯
          </NuxtLink>
          <NuxtLink to="/contact" class="nav-link">
            联系我们
          </NuxtLink>
        </div>

        <!-- Mobile Menu Button -->
        <button class="md:hidden" @click="toggleMobileMenu">
          <span class="flex flex-col h-6 w-6 items-center justify-center">
            <span class="bg-gray-600 h-0.5 w-full transition-all duration-300" :class="{ 'rotate-45 translate-y-1.5': mobileMenuOpen }" />
            <span class="my-1 bg-gray-600 h-0.5 w-full transition-all duration-300" :class="{ 'opacity-0': mobileMenuOpen }" />
            <span class="bg-gray-600 h-0.5 w-full transition-all duration-300" :class="{ '-rotate-45 -translate-y-1.5': mobileMenuOpen }" />
          </span>
        </button>
      </div>

      <!-- Mobile Menu -->
      <div class="transition-all duration-300 overflow-hidden md:hidden" :class="mobileMenuOpen ? 'max-h-96 mt-4' : 'max-h-0'">
        <div class="py-4 space-y-3">
          <NuxtLink to="/" class="nav-link py-2 block">
            首页
          </NuxtLink>
          <NuxtLink to="/products" class="nav-link py-2 block">
            产品中心
          </NuxtLink>
          <NuxtLink to="/about" class="nav-link py-2 block">
            关于我们
          </NuxtLink>
          <NuxtLink to="/news" class="nav-link py-2 block">
            新闻资讯
          </NuxtLink>
          <NuxtLink to="/contact" class="nav-link py-2 block">
            联系我们
          </NuxtLink>
        </div>
      </div>
    </nav>
  </header>
</template>

<style scoped>
.nav-link {
  @apply text-gray-700 hover:text-blue-600 transition-colors duration-300 font-medium;
}
</style>
